<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-main>
          <!-- echarts图表 -->
          <div style="margin-left:20px">
            <el-card style="height:350px;">
              <div  ref="echarts1" style="height:335px;"></div>
            </el-card>
          </div>
          <div class="graph">
              <el-card style="height:360px">
                <div ref="echarts2" style="height:360px;">
                </div>
              </el-card>
              
              <el-card style="height:360px">
                <div ref="echarts3" style="height:360px"></div>
              </el-card>
            </div>
            <div class="graph">
              
              <el-card style="height:360px">
                <div ref="echarts4" style="height:360px;">
                </div>
              </el-card>
              
              <el-card style="height:360px">
                <div ref="echarts5" style="height:360px"></div>
              </el-card>
            </div>

        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script >
import * as echarts from "echarts";
import chinaJson from "../china.json";
import "echarts-gl";
export default {
  name: "information",

  data(){
    return{
      dataX:[],
      dataA2Y:[],
      dataA3Y:[],
      dataD2Y:[],
      dataD3Y:[],

      dataXA2:[],
      dataXD2:[],
      dataXA3:[],
      dataXD3:[],

      lineA2Y:[],
      lineA3Y:[],
      lineD2Y:[],
      lineD3Y:[],

      abstA2Y:[],
      abstA3Y:[],
      abstD2Y:[],
      abstD3Y:[],

      iarsA2Y:[],
      iarsA3Y:[],
      iarsD2Y:[],
      iarsD3Y:[],
    };
  },
  mounted() {
    this.newLineCharts();
    this.newRadarDataA2();
    this.newRadarDataD2();
    this.newRadarDataA3();
    this.newRadarDataD3();
  },
  methods: {
    async getEchartData(){

  const responseA2 = await this.$axios.get("http://localhost:8888/information/flightnumberA2");
  const resultA2 = responseA2.data.data;
  for(let i=0;i<resultA2.length;i++){
    this.dataX.push(resultA2[i].dtime);
    this.dataA2Y.push(resultA2[i].count);
  }

  const responseD2 = await this.$axios.get("http://localhost:8888/information/flightnumberD2");
  const resultD2 = responseD2.data.data;
  for(let i=0;i<resultD2.length;i++){
    this.dataD2Y.push(resultD2[i].count);
  }

  const responseA3 = await this.$axios.get("http://localhost:8888/information/flightnumberA3");
  const resultA3 = responseA3.data.data;
  for(let i=0;i<resultA3.length;i++){
    this.dataA3Y.push(resultA3[i].count);
  }

  const responseD3 = await this.$axios.get("http://localhost:8888/information/flightnumberD3");
  const resultD3 = responseD3.data.data;
  for(let i=0;i<resultD3.length;i++){
    
    this.dataD3Y.push(resultD3[i].count);
  }


},
async newLineCharts(){
  const chart = echarts.init(this.$refs.echarts1);
  await this.getEchartData();
  if (chart){
   const option = {
    title: {
    text: '每日航班数统计'
  },
  tooltip: {
    trigger: 'axis'
  },
    legend: {
    data: ['到港直达', '到港中转', '离港直达', '离港中转']
  },
      xAxis: {
        name:'日期',
        type: 'category',
        boundaryGap: false,
        data: this.dataX,
        axisLine: {
          lineStyle: {
            color: '#609ee9', //x轴的颜色
            width: 5, //轴线的宽度
          }
        }
      },
      yAxis: {
        name: '每日航班数',
        type: 'value',
        axisLine: {
          lineStyle: {
            color: 'black', 
          }
        },
      },
      series: [
        {
          name: '到港直达',
          data:this.dataA2Y,
          type: 'line',
          symbol: 'circle', //折线点设置为实心点
          symbolSize: 8, //折线点的大小
          itemStyle: {
            normal: {
              color:'#0099FF', //折线点的颜色
              borderColor: '#ffffff', //拐点边框颜色
              borderWidth: 2, //拐点边框大小
            },
          },
          lineStyle: {
            color:'#FF9900' //折线的颜色
          },
        },
        {
          name: '到港中转',
          data:this.dataA3Y,
          type: 'line',
          symbol: 'circle', //折线点设置为实心点
          symbolSize: 8, //折线点的大小
          itemStyle: {
            normal: {
              color:'#00FF99', //折线点的颜色
              borderColor: '#ffffff', //拐点边框颜色
              borderWidth: 2, //拐点边框大小
            },
          },
          lineStyle: {
            color:'#FF0099' //折线的颜色
          },
        },
        {
          name: '离港直达',
          data:this.dataD2Y,
          type: 'line',
          symbol: 'circle', //折线点设置为实心点
          symbolSize: 8, //折线点的大小
          itemStyle: {
            normal: {
              color:'#9900FF', //折线点的颜色
              borderColor: '#ffffff', //拐点边框颜色
              borderWidth: 2, //拐点边框大小
            },
          },
          lineStyle: {
            color:'#00FF00' //折线的颜色
          },
        },
        {
          name: '离港中转',
          data:this.dataD3Y,
          type: 'line',
          symbol: 'circle', //折线点设置为实心点
          symbolSize: 8, //折线点的大小
          itemStyle: {
            normal: {
              color:'#FFAA00', //折线点的颜色
              borderColor: '#ffffff', //拐点边框颜色
              borderWidth: 2, //拐点边框大小
            },
          },
          lineStyle: {
            color:'#00FF00' //折线的颜色
          },
        }
      ]
   };
   chart.setOption(option);
    window.addEventListener('resize', function() {
    chart.resize();
  });
}
},

async getRadarDataA2(){
  const response2A2 = await this.$axios.get("http://localhost:8888/information/eventflightA2");
  const resultA2 = response2A2.data.data;
  // console.log(resultA2);
  for(let i=0;i<resultA2.length;i++){
    this.dataXA2.push(resultA2[i].dtime);
    this.lineA2Y.push(resultA2[i].totalCount);
    this.abstA2Y.push(resultA2[i].abstCount);
    this.iarsA2Y.push(resultA2[i].iarsCount);
  }
},
async newRadarDataA2(){
      const myChart = echarts.init(this.$refs.echarts2);
      await this.getRadarDataA2();
      // 指定图表的配置项和数据
var option = {
    title: {
        text: '到港直达'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['延误数量','取消数量','总数量']
    },
    xAxis: {
        data: this.dataXA2
    },
    yAxis: [
        {
            type: 'value',
            name: '航班数量',
            min: 0,
            max: 300,
            interval: 50,
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '事件数量',
            min: 0,
            max: 300,
            interval: 100,
            axisLabel: {
                formatter: '{value}'
            }
        }
    ],
    series: [
        {
            name:'延误数量',
            type:'bar',
            stack: 'Ad',
            data:this.iarsA2Y
        },
        {
            name:'取消数量',
            type:'bar',
            stack: 'Ad',
            data:this.abstA2Y
        },
        {
            name:'总数量',
            type:'line',
            yAxisIndex: 1,
            data:this.lineA2Y
        },
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener('resize', function() {
  myChart.resize();
  });
},

async getRadarDataD2(){
  const response2D2 = await this.$axios.get("http://localhost:8888/information/eventflightD2");
  const resultD2 = response2D2.data.data;
  // console.log(resultA2);
  for(let i=0;i<resultD2.length;i++){
    this.dataXD2.push(resultD2[i].dtime);
    this.lineD2Y.push(resultD2[i].totalCount);
    this.abstD2Y.push(resultD2[i].abstCount);
    this.iarsD2Y.push(resultD2[i].iarsCount);
  }
},
async newRadarDataD2(){
      const myChart = echarts.init(this.$refs.echarts3);
      await this.getRadarDataD2();
      // 指定图表的配置项和数据
var option = {
    title: {
        text: '离港直达'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['延误数量','取消数量','总数量']
    },
    xAxis: {
        data: this.dataXD2
    },
    yAxis: [
        {
            type: 'value',
            name: '航班数量',
            min: 0,
            max: 300,
            interval: 50,
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '事件数量',
            min: 0,
            max: 300,
            interval: 100,
            axisLabel: {
                formatter: '{value}'
            }
        }
    ],
    series: [
        {
            name:'延误数量',
            type:'bar',
            stack: 'Ad',
            data:this.iarsD2Y
        },
        {
            name:'取消数量',
            type:'bar',
            stack: 'Ad',
            data:this.abstD2Y
        },
        {
            name:'总数量',
            type:'line',
            yAxisIndex: 1,
            data:this.lineD2Y
        },
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener('resize', function() {
  myChart.resize();
  });
},

async getRadarDataA3(){
  const response2A3 = await this.$axios.get("http://localhost:8888/information/eventflightA3");
  const resultA3 = response2A3.data.data;
  // console.log(resultA2);
  for(let i=0;i<resultA3.length;i++){
    this.dataXA3.push(resultA3[i].dtime);
    this.lineA3Y.push(resultA3[i].totalCount);
    this.abstA3Y.push(resultA3[i].abstCount);
    this.iarsA3Y.push(resultA3[i].iarsCount);
  }
},
async newRadarDataA3(){
      const myChart = echarts.init(this.$refs.echarts4);
      await this.getRadarDataA3();
      // 指定图表的配置项和数据
var option = {
    title: {
        text: '到港中转'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['延误数量','取消数量','总数量']
    },
    xAxis: {
        data: this.dataXA3
    },
    yAxis: [
        {
            type: 'value',
            name: '航班数量',
            min: 0,
            max: 300,
            interval: 50,
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '事件数量',
            min: 0,
            max: 300,
            interval: 100,
            axisLabel: {
                formatter: '{value}'
            }
        }
    ],
    series: [
        {
            name:'延误数量',
            type:'bar',
            stack: 'Ad',
            data:this.iarsA3Y
        },
        {
            name:'取消数量',
            type:'bar',
            stack: 'Ad',
            data:this.abstA3Y
        },
        {
            name:'总数量',
            type:'line',
            yAxisIndex: 1,
            data:this.lineA3Y
        },
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener('resize', function() {
  myChart.resize();
  });
},

async getRadarDataD3(){
  const response2D3 = await this.$axios.get("http://localhost:8888/information/eventflightD3");
  const resultD3 = response2D3.data.data;
  // console.log(resultA2);
  for(let i=0;i<resultD3.length;i++){
    this.dataXD3.push(resultD3[i].dtime);
    this.lineD3Y.push(resultD3[i].totalCount);
    this.abstD3Y.push(resultD3[i].abstCount);
    this.iarsD3Y.push(resultD3[i].iarsCount);
  }
},
async newRadarDataD3(){
      const myChart = echarts.init(this.$refs.echarts5);
      await this.getRadarDataD3();
      // 指定图表的配置项和数据
var option = {
    title: {
        text: '离港中转'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['延误数量','取消数量','总数量']
    },
    xAxis: {
        data: this.dataXD3
    },
    yAxis: [
        {
            type: 'value',
            name: '航班数量',
            min: 0,
            max: 300,
            interval: 50,
            axisLabel: {
                formatter: '{value}'
            }
        },
        {
            type: 'value',
            name: '事件数量',
            min: 0,
            max: 300,
            interval: 100,
            axisLabel: {
                formatter: '{value}'
            }
        }
    ],
    series: [
        {
            name:'延误数量',
            type:'bar',
            stack: 'Ad',
            data:this.iarsD3Y
        },
        {
            name:'取消数量',
            type:'bar',
            stack: 'Ad',
            data:this.abstD3Y
        },
        {
            name:'总数量',
            type:'line',
            yAxisIndex: 1,
            data:this.lineD3Y
        },
    ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
window.addEventListener('resize', function() {
  myChart.resize();
  });
},

},


};
</script>

<style >
.graph {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.el-card {
  width: 97%;
}

</style>